<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>产品内页</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/proInfo.css">
</head>

<body>
    <div class="home">


        <div class="header  animated fadeIn">
            <div class="box">
                <div class="l">
                    <a href="./index.html" class="logo">
                        <img src="./images/logo.svg" alt="">
                    </a>
                    <div class="links">
                        <a href="./products.html" class="active">Catalogue</a>
                        <a href="./creative.html" >Creative</a>
                        <a href="./about.html">About</a>
                        <a href="./contact.html">Contact</a>
                    </div>
                </div>
                <div class="r">
                    <a href="">CN/EN</a>
                </div>
            </div>
        </div>

        <div class="pheader">
            <div class="menu">
                <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                    <img src="./images/logo.svg" alt="">
                </a>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="item">
                <div class="tb">
                    <a href="./products.html">Catalogue</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./creative.html" >Creative</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./about.html">About</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./contact.html">Contact</a>
                </div>
            </div>
        </div>

        <div class="topbg" aos="fade-left">
            <img src="./images/pbg1.png" alt="">
        </div>

        <div class="cbg" aos="fade-right">
            <img src="./images/pbg2.png" alt="">
        </div>

        <div class="section1">
            <div class="tlink" aos="fade-up">
                <a href="">Home/</a>
                <a href="">Catalogue/</a>
                <p>YB002</p>
            </div>
            <div class="content">
                <div class="l" >
                    <div class="pic" aos="fade-right">
                        <img src="./images/proInfo1.png" alt="">
                    </div>
                    <div class="xg" aos="fade-left">
                        <img src="./images/proInfo2.png" alt="">
                    </div>
                </div>
                <div class="r" aos="fade-up">
                    <p class="p1">YB002</p>
                    <p class="p2">Main material: pp</p>
                    <div class="info">
                        <div class="i1">
                            <p class="pt">Capacity: </p>
                            <div class="tags">
                                <p>120ml</p>
                                <p>100ml</p>
                                <p>50ml</p>
                            </div>
                        </div>
                        <!-- <div class="i1">
                            <p class="pt">Discharge Capacity:</p>
                            <div class="tags">
                                <p>0.25cc</p>
                            </div>
                        </div>
                        <div class="i1">
                            <p class="pt">Technology Process: </p>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="section2" aos="fade-up">
            <table style="border-collapse: collapse; height: 75px; width: 99.6241%;" border="0">
                <tbody>
                    <tr>
                        <td style="width: 11.2075%;">item no.</td>
                        <td style="width: 11.2075%;">Capacity</td>
                        <td style="width: 11.2075%;">H(mm)</td>
                        <td style="width: 11.2075%;">h(mm)</td>
                        <td style="width: 11.2075%;">D(mm)</td>
                        <td style="width: 18.2075%;">System</td>
                        <td style="width: 11.2075%;">Main Material</td>
                        <td style="width: 11.2075%;">Discharge Rate</td>
                    </tr>
                    <tr>
                        <td style="width: 11.2075%;">YB013-A</td>
                        <td style="width: 11.2075%;">100ml</td>
                        <td style="width: 11.2075%;">177</td>
                        <td style="width: 11.2075%;">101.5</td>
                        <td style="width: 11.2075%;">41</td>
                        <td style="width: 11.2075%;border-left: 1px solid rgba(0,0,0,.05);" rowspan="2">airless pump/screw<br> 真空瓶/螺口</td>
                        <td style="width: 11.2075%;" rowspan="2">AS</td>
                        <td style="width: 11.2075%;" rowspan="2">0.25cc</td>
                    </tr>
                    <tr>
                        <td style="width: 11.2075%;">YB013-A</td>
                        <td style="width: 11.2075%;">80ml</td>
                        <td style="width: 11.2075%;">157</td>
                        <td style="width: 11.2075%;">81.5</td>
                        <td style="width: 11.2075%;">41</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="section3">
            <div class="item" aos="fade-right">
                <div class="pic">
                    <img src="./images/proInfo3.png" alt="">
                </div>
                <P>Product detail drawing</P>
            </div>
            <div class="item" aos="fade-left">
                <div class="pic">
                    <img src="./images/proInfo4.png" alt="">
                </div>
                <P>Product presentation</P>
            </div>
        </div>


        <div class="section4">
            <div class="t" aos="fade-up">More products</div>
            <div class="pros" aos="fade-up">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="">
                                <div class="pic">
                                    <img src="./images/rec.png" alt="">
                                </div>
                                <p class="name">TZ004</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="">
                                <div class="pic">
                                    <img src="./images/rec.png" alt="">
                                </div>
                                <p class="name">TZ004</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="">
                                <div class="pic">
                                    <img src="./images/rec.png" alt="">
                                </div>
                                <p class="name">TZ004</p>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="./images/prev.png" alt="">
                </div>
                <div class="next">
                    <img src="./images/next.png" alt="">
                </div>
            </div>
            <div aos="fade-up" aos-delay="200">
                <a href="products.html" class="common_button">
                    <span class="dot"></span>
                    <span class="text">Back product List</span>
                </a>
            </div>

        </div>

        <div class="section_bg">
            <p class="p1" aos="fade-up">Contact Us</p>
            <div class="des" aos="fade-up" style="transition-delay: 200ms;">
                NINGBO YUNBANG COMMODITIES TECHNOLOGY CO., LTD.<br>
                Professional cosmetic packaging manufacturer. Explore more of our details.
            </div>
            <div aos="fade-up" aos-delay="400">
                <a class="button noset" href="./contact.html">
                    <span class="dot"></span>
                    <span class="text">Contact Now</span>
                </a>
            </div>

        </div>



        <div class="foot">
            <div class="dom1">
                <div class="item">
                    <p class="p1">Products</p>
                    <div class="aList">
                        <a href="">airless bottle series</a>
                        <a href="">lotion pump</a>
                        <a href="">Airless pump</a>
                        <a href="">sprayer pump</a>
                        <a href="">dropper</a>
                        <a href="">cream Jar series</a>
                        <a href="">Glass bottle series</a>
                    </div>
                </div>
                <div class="item">
                    <p class="p1">Creative Product</p>
                    <div class="aList">
                        <a href="">Surface treatment process</a>
                        <a href="">Product color matching</a>
                        <a href="">Design concept</a>
                    </div>
                </div>
                <div class="item">
                    <p class="p1">About Us</p>
                    <div class="aList">
                        <a href="">Profile</a>
                        <a href="">Culture</a>
                        <a href="">Workspace</a>
                        <a href="">Exhibition</a>
                    </div>
                </div>
                <div class="r">
                    <p class="p1">Contact</p>
                    <div class="des">
                        <p>Wechat/WhatsApp: +86 13486448648</p>
                        <p>Emali: 605109526@qq.com hz970207@gmail.com </p>
                        <p>Alibaba: https://yunbangryp.en.alibaba.com</p>
                    </div>
                    <div class="form">
                        <input type="text" placeholder="Enter Your Email">
                        <a href="">Subsribe</a>
                    </div>
                    <div class="icons">
                        <a href="https://www.facebook .com/profile.php?id=100062550642717&mibextid=LQQJ4d" target="_blank">
                            <img src="./images/f1.svg" alt="">
                        </a>
                        <a href="http://linkedin.com/in/noah-zhang-aba832204" target="_blank">
                            <img src="./images/f2.svg" alt="">
                        </a>
                        <a href="https://x.com/Noah_Hao7" target="_blank">
                            <img src="./images/f3.svg" alt="">
                        </a>
                        <a  href="https://www.instagram.com/noah_hao?igsh=eWNreTdrZ3phag%3D%3D&utm_source=qr" target="_blank">
                            <img src="./images/f4.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="dom2">
                <div class="l">
                    COPYRIGHT O 2024 LIGHTSPACE INTERNATIONAL AG.
                </div>
                <div class="r">
                    <a href="">Terms and Conditions Privocy Policy</a>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/countUp.js"></script>
    <script>

        var swiper = new Swiper('.pros .swiper-container', {
            speed: 1000,
            init: true,
            loop: true,
            slidesPerView: 1.8,
            slideToClickedSlide: true,
            initialSlide: 1,
            centeredSlides: true,
            spaceBetween: '5%',
            navigation: {
                nextEl: '.pros .next',
                prevEl: '.pros .prev',
            },
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            breakpoints: {
                1024: {  //当屏幕宽度大于等于1280
                    slidesPerView: 3,
                }
            }
        });

    </script>
</body>

</html>